<!-- nepm公众监督员 -->
<template>
    <!-- <div>supervisor</div> -->
    <div class="supervisor-root">
        <el-form label-width="100px" :inline="true" :model="supervisorForm" class="roles-form">
            <el-form-item>
                <el-input :prefix-icon="Search" v-model="supervisorForm.key" placeholder="查找关键字" clearable
                    style="width: 200px;" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getList(null)">查找</el-button>
            </el-form-item>
        </el-form>
        <el-button-group class="btns">
            <el-button type="primary" @click="getList(null)">全部</el-button>
            <el-button type="primary" @click="getList(0)">未派遣</el-button>
            <el-button type="primary" @click="getList(1)">已派遣</el-button>
            <el-button type="primary" @click="getList(2)">已检测</el-button>
        </el-button-group>
        <el-table :data="dataList.data" border>
            <el-table-column prop="id" label="id" width="75" align="center" />
            <!-- <el-table-column prop="userName" label="监督员账号" align="center" /> -->
            <!-- <el-table-column prop="phone" label="监督员手机号" align="center" /> -->
            <el-table-column prop="date" label="提交时间" align="center" width="180" />
            <el-table-column prop="city" label="城市" align="center" width="100" />
            <el-table-column prop="estimateAqi" label="风险等级预估" align="center" width="120">
                <template #default="scope">
                    <el-tag effect="plain" :color="color[scope.row.estimateAqi - 1]" style="width: 20px;
                        height: 20px;">
                    </el-tag>
                    <div>{{ scope.row.estimateAqi + '级污染' }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="reason" label="反馈信息" align="center">
                <template #default="scope">
                    <div class="feedback-text" @click="feedbackMessage(scope.row.reason, scope.row.city)">{{
                        scope.row.reason
                    }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="status" width="100" label="状态" align="center">
                <template #default="scope">
                    <el-tag type="primary" v-if="scope.row.status == 1">已派遣</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.status == 0">未派遣</el-tag>
                    <el-tag type="success" v-else-if="scope.row.status == 2">测量完毕</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="co" label="一氧化碳(CO)/(ug/m3)" align="center">
                <template #default="scope">
                    <div>{{ scope.row.co ? scope.row.co : '未测量' }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="so2" label="二氧化硫(SO2)/(ug/m3)" align="center">
                <template #default="scope">
                    <div>{{ scope.row.so2 ? scope.row.so2 : '未测量' }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="pm2_5" label="悬浮颗粒物(PM2.5)/(ug/m3)" align="center">
                <template #default="scope">
                    <div>{{ scope.row.pm ? scope.row.pm : '未测量' }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="aqi" label="测量结果等级" align="center" width="120">
                <template #default="scope">
                    <div v-if="scope.row.aqi !== 0">
                        <el-tag effect="plain" :color="color[scope.row.aqi - 1]" style="width: 20px;height: 20px;">
                        </el-tag>
                        <div>{{ scope.row.aqi + '级污染' }}</div>
                    </div>
                    <div v-else>{{ '未测量' }}</div>
                </template>
            </el-table-column>
            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                <template #default="scope">
                    <el-button type="primary" link size="small" @click="open(scope.row.cityId, scope.row.id)"
                        :disabled="scope.row.status !== 0">派遣</el-button>
                    <el-button type="primary" link size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: center;">
            <el-pagination style="margin: 20px 0;" background layout="prev, pager, next" :total="tablePage.totalCount"
                @current-change="currPage" />
        </div>
        <el-dialog v-model="dispatch.dialogVisible" :title="dispatch.dialogTitle" :before-close="handleClose">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>对某城市的反馈派遣网格员</span>
                    </div>
                </template>
                <el-form ref="formRef" :model="dispatch.info" label-position="right" label-width="100px " :rules="rules">
                    <el-form-item label="选择网格员" prop="testUserId">
                        <el-select v-model="dispatch.info.testUserId" placeholder="选择网格员" size="large">
                            <el-option v-for="(k) in dispatch.list" :key="k.userId" :label="k.name" :value="k.userId" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="patch(dispatch.info.id, dispatch.info.testUserId)">确认</el-button>
                    </el-form-item>
                </el-form>
            </el-card>

        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, inject, onMounted, ref } from 'vue'
import { get, post } from '../../utils/index.ts'
import { ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
const Message = inject('$message') as any
const supervisorForm = reactive({
    key: ''
})
const feedbackMessage = (text: string, city: string) => {
    ElMessageBox.alert(text, `城市:${city}`, {
        confirmButtonText: 'OK',
    })
}
const color = ['#02E300', '#FFFF00', '#FF7E00', '#FE0000', '#98004B', '#7E0123']
let dataList = reactive({ data: [] })
const tablePage = reactive({
    pageIndex: 1,
    pageSize: 10,
    totalCount: 0,
    isDone: null,
})

const getList = async (isDone: any) => {
    tablePage.isDone = isDone
    let url = '/sys/referdate/list'
    let data = {
        page: tablePage.pageIndex,
        limit: tablePage.pageSize,
        isDone: tablePage.isDone,
        key: supervisorForm.key === '' ? null : supervisorForm.key
    }
    let res: any = await get(url, data)
    if (res && res.code === 0) {
        dataList.data = res.page.list
        tablePage.totalCount = res.page.totalCount
        tablePage.pageIndex = res.page.currPage
    } else {
        Message.info(`${res.code}:${res.msg}`)
    }
}
const rules = {
    testUserId: [{ required: true, message: '请填写选择网格员', trigger: 'blur' }]
}
const currPage = (e: any) => {
    tablePage.pageIndex = e
    getList(tablePage.isDone)
}
let formRef = ref(null)
//派遣列表？
const dispatch = reactive({
    dialogVisible: false,
    dialogTitle: '派遣aqi网格员',
    info: {
        id: null,//事件id
        testUserId: null,//网格员id
        testUserName: null,//网格员账号
    },
    list: [

    ],//网格员列表
    open: (cityId: any, id: any) => {
        dispatch.dialogVisible = true
        dispatch.info.id = id
        if (cityId) {
            initInfo(cityId)
        }
    },
    handleClose: () => {
        dispatch.dialogVisible = false
        dispatch.info.id = null
        dispatch.info.testUserId = null
    },
    initInfo: async (cityId: any) => {
        let res: any = await get(`/sys/referdate/getTestList`, { cityId, })
        if (res && res.code === 0) {
            if (res.testUserList && res.testUserList.length === 0) {
                Message.info(`该城市暂无网格员`)
                return
            }
            dispatch.list = res.testUserList
        } else {
            Message.info(`${res.code}:${res.msg}`)
        }
    },
    //派遣网格员
    patch: async (id: any, testUserId: any) => {
        const form = formRef as any
        form.value.validate((valid: boolean) => {
            console.log(valid);
            if (valid) { } else {
                Message.error('表单校验失败')
                return
            }
        })
        if (testUserId) { } else {
            Message.info('获取id失败,请选择网格员')
            return
        }
        let data = {
            status: 1,
            testUserId,
            id,
        }
        let res: any = await post('/sys/referdate/update', data)
        if (res && res.code === 0) {
            Message.success('派遣成功')
            getList()
            dispatch.handleClose()
        } else {
            Message.info(`${res.code}:${res.msg}`)
        }
    }
})
const { open, handleClose, initInfo, patch } = dispatch
onMounted(() => {
    getList(null)
})

</script>

<style scoped lang="scss">
.supervisor-root {
    box-sizing: border-box;
    padding: 20px 20px;


    .btns {
        margin: 0px 10px 10px;
    }

    .feedback-text {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
</style>